<template>
  <view hover-class="none" hover-stop-propagation="false" class="map">
			<map id="map"
				v-if="isLoad"
				:longitude="longitude"
				:latitude="latitude"
				:markers="markers"
				:scale="11"
				:polyline="polyline"
				show-location style="width: 100%; height: 100%;"></map>
		</view>
</template>

<script>
	export default {
		options: { styleIsolation: 'shared' },
		data() {
			return {
        longitude:'',//中心点
        latitude:'',
				markers:[
					{
						iconPath: "../static/ico_address@2x.png",
						width: 32, //宽
						height: 32, //高
						callout:{
							content:"",
							color:"#4083F0",
							fontSize:14,
							borderRadius:6,
							padding:10,
							bgColor:"#fff",
							display:"ALWAYS"
						}, 
					},
          {
						iconPath: "../static/ico_address2@2x.png",
						width: 35, //宽
						height: 35, //高
						anchor:{x: .5, y: .3},
						callout:{
							content:"师傅所在位置",
							color:"#4083F0",
							fontSize:14,
							borderRadius:6,
							padding:10,
							bgColor:"#fff",
							display:"ALWAYS",
						},
					}
				],
				polyline: [{
					points: [],
					color: "#ff6600",
					width: 2,
					dottedLine: false,
					arrowLine: true,
					borderColor:"#ff6600",
					borderWidth:2
				}],
				isLoad:false
			}
		},
		onLoad(options){
			let to = JSON.parse(options.to)
			this.getPosition(to,options.orderId)
		},
		methods: {
			async getPosition(to,orderId){
				const {code,result} = await this.$apis.getApi('/order/getOrderWorkPosition',{orderId})
				if(code==200){
					let from = {
						latitude: result.latitude,
						longitude: result.longitude,
					}
					console.log('经纬度'+JSON.stringify(from))
					this.longitude = result.longitude
					this.latitude = result.latitude
					this.markers[0] = {...this.markers[0],...to}
					this.polyline[0].points.push(to)
					this.polyline[0].points.push(from)
					this.markers[1] = {...this.markers[1],...from}
					this.markers[0].callout.content = "师傅目前距离你"+this.getDistance(to.latitude,to.longitude,from.latitude,from.longitude)
					this.isLoad = true
				}
			},
			// 计算距离函数
			Rad(d) { 
				//根据经纬度判断距离
				return d * Math.PI / 180.0;
			},
			getDistance(lat1, lng1, lat2, lng2) {
					// lat1用户的纬度
					// lng1用户的经度
					// lat2商家的纬度
					// lng2商家的经度
					var radLat1 = this.Rad(lat1);
					var radLat2 = this.Rad(lat2);
					var a = radLat1 - radLat2;
					var b = this.Rad(lng1) - this.Rad(lng2);
					var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
					s = s * 6378.137;
					s = Math.round(s * 10000) / 10000;
					s = s.toFixed(1) + 'km' //保留两位小数
					return s
			},
			getLine:(from,to)=>{
				return new Promise((resolve,rej)=>{
					let url=`https://apis.map.qq.com/ws/direction/v1/driving/?from=${from.latitude},${from.longitude}&to=${to.latitude},${to.longitude}&output=json&key=自己申请的腾讯地图官方key`
					wx.request({
						url: url,
						method: 'get',
						success(res) {
							let coors = res.data.result.routes[0].polyline
									for (var i = 2; i < coors.length; i++)
									{ coors[i] = coors[i - 2] + coors[i] / 1000000 }
									let coors_new = [];  
									for(var j = 0; j < coors.length; j++){
											coors_new.push({
											latitude: parseFloat(coors[j]),
											longitude: parseFloat(coors[j+1])
										})
										j++;
									} 
									res.AtLastLineList=coors_new
									resolve(res)
						}})
				})
			}
		}
  }
</script>
<style scoped>
.map{
  width: 100vh;
  height: 100vh;
}
</style>